<template>
	<div id="index">
		<div class="index_head">
			<div class="logo">
				<view ><img src="https://yo.docshare.org.cn/static/images/logo.png"></view>
			</div>
			<div class="search">
				<picker class="picker" @change="bindPickerChange" :value="type" :range="typeArray">
					<view class="uni-input">{{typeArray[type]}}</view>
				</picker>
				<i class="am-icon-caret-down"></i>
				<input class="text" type="search" placeholder="请输入关键词查询" v-model="se"/>
				<input class="submit " type="submit" @click="serach" />
				<!-- <i class="am-icon-search"></i>/ -->
				<icon type="search" class="am-icon-search" style="position: absolute;
    right: 7px;
    top: 3px;"/>
				<div class="clear"></div>
			</div>
			<view class="phone" @click="callPhoeHandle">
				<img src="https://yo.docshare.org.cn/static/images/phone.png" />
			</view>
		</div>

		<swiper style="height: 240px;margin-top: 20rpx;" :indicator-dots="true" :autoplay="true" :duration="500" :interval="2000">
			<swiper-item>
				<image style="height: 240px;width: 100%;" :src="'https://yo.docshare.org.cn'+banners.one" mode="scaleToFill"></image>
			</swiper-item>
			<swiper-item>
				<image style="height: 240px;width: 100%;" :src="'https://yo.docshare.org.cn'+banners.two" mode="scaleToFill"></image>
			</swiper-item>
			<swiper-item>
				<image style="height: 240px;width: 100%;" :src="'https://yo.docshare.org.cn'+banners.three" mode="scaleToFill"></image>
			</swiper-item>
			<swiper-item>
				<image style="height: 240px;width: 100%;" :src="'https://yo.docshare.org.cn'+banners.four" mode="scaleToFill"></image>
			</swiper-item>

		</swiper>

		<div class="order_nav">
			<ul class="box_nav am-avg-sm-4">
				<li>
					<view title="" @click="uni.navigateTo({
						url:'./trip_comment'
					})">
						<img src="https://yo.docshare.org.cn/static/images/index_icon01.png" />
						<p>与我相关</p>
					</view>
				</li>
				
				<li>
					<a title="" @click="uni.navigateTo({
						url:'release'
					})">
						<img src="https://yo.docshare.org.cn/static/images/index_icon03.png" />
						<p>发表游记</p>
					</a>
				</li>
				<li>
				<!-- 翻译链接 -->
					
					<!-- 天气链接 -->
					<a title="" @click="uni.navigateTo({url:'../../pageB/pages/user/weather'})">	
						<img src="https://yo.docshare.org.cn/static/images/weather.png" />
						<p>天气</p>
					</a>
				</li>
				<li>
					<a title=""  @click="uni.navigateTo({
						url:'../../pageB/pages/user/sos'
					})">
						<img src="https://yo.docshare.org.cn/static/images/index_icon04.png" />
						<p>紧急求助</p>
					</a>
				</li>
				<div class="clear"></div>
			</ul>
		</div>

		<div id="beautiful_country">
			<div id="item_name">
				<img src="https://yo.docshare.org.cn/static/images/index_icon06.png">
				<span>发现游记</span>
			</div>
			<div id="app">
				<ul class="am-avg-sm-2">
					<li class="beautiful_list" v-for="(b,i) in articles" @click="itemClicked(b,'beautiful_detail')" :key="i">
						<div class="pic">
							<img :src="'https://yo.docshare.org.cn'+b.background">
						</div>
						<div class="name">
							<img alt="" class="head" :src="'https://yo.docshare.org.cn'+b.headphoto">
							<span>{{b.individualitysignature}}</span>
							<div class="num">
								<i class="am-icon-eye"></i>
								<span>222</span>
								<i class="am-icon-comments"></i>
								<span>3</span>
							</div>
							<div class="clear"></div>
						</div>
						<label>{{b.name}}</label>
						<p>{{b.articletitle}}</p>
					</li>
				</ul>
			</div>
			<div id="more">
				<a title="" @click="uni.navigateTo({
					url:'beautiful_list'
				})">
					<span>更多游记</span>
					<!-- <i class="am-icon-angle-right"></i> -->
					<image src="https://yo.docshare.org.cn/static/tubiao/gengduo.png" mode="" style="width: 15px;height: 15px;"></image>
				</a>
			</div>
		</div>


		<div id="news_list">
			<div id="item_name">
				<img src="https://yo.docshare.org.cn/static/images/index_icon08.png">
				<span>新闻资讯</span>
			</div>
			<div id="app2">
				<ul v-for="(c,i) in news" @click="itemClicked(c,'news_detail')" :key="i">
					<li>
						<a title="" class="news">
							<div class="pic">
								<img :src="'https://yo.docshare.org.cn'+c.newsbackground">
							</div>
							<div class="project_cont">
								<p>{{c.newstitle}}——{{c.name}}</p>
							</div>
							<div class="price">
								<p>{{c.newsdate}}</p>
								<span>999+</span>
								<i class="am-icon-eye"></i>
								<div class="clear"></div>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div id="more">
				<a title="" @click="uni.navigateTo({
					url:'news_list'
				})">
					<span>更多资讯</span>
					<!-- <i class="am-icon-angle-right"></i> -->
					<image src="https://yo.docshare.org.cn/static/tubiao/gengduo.png" mode="" style="width: 15px;height: 15px;"></image>
				</a>
			</div>
		</div>
		<div id="footer">
			<div class="first">
				<ul class="am-avg-sm-2">
					<li class="active">
						<a title="" @click="uni.navigateTo({
							url:'index'
						})">
							<img src="https://yo.docshare.org.cn/static/images/icon-footer01-a.png" />
							<p>首页</p>
						</a>
					</li>
					<li>
						<a title=""  @click="uni.navigateTo({
							url:'../../pageA/pages/active/trip_list'
						})">
							<img alt=""  src="https://yo.docshare.org.cn/static/images/icon-footer4-a.png" />
							<p>活动</p>
						</a>
					</li>
				</ul>
			</div>
			<div class="beautiful">
				<a title=""  @click="uni.navigateTo({
					url:'../add/my_note'
				})">
					<img alt="" src="https://yo.docshare.org.cn/static/images/icon-footer3-a.png" />
				</a>
			</div>
			<div class="last">
				<ul class="am-avg-sm-2">
					<li>
						<a title="" @click="uni.navigateTo({
							url:'../map/map'
						})">
							<img alt=""  src="https://yo.docshare.org.cn/static/images/icon-footer2-a.png"/>
							<p>地图</p>
						</a>
					</li>
					<li>
						<a title="" @click="uni.navigateTo({
							url:'../../pageB/pages/user/user_center'
						})">
							<img alt="" src="https://yo.docshare.org.cn/static/images/icon-footer5-a.png" />
							<p>我的</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				uni,
				se:'',
				usr: '',
				articles: {},
				type: 0,
				news: {},
				banners:[],
				typeArray: ['活动'],
			}
		},
		methods: {
			serach(){
				var that = this;  
				uni.request({
					url: `${config.baseUrl}/article/search_active?token=` + uni.getStorageSync('token'),
					method: 'POST',
					data:{
						'se': this.se,
					},
					success(r) {
						if (r.data.succ) {
							var actives = r.data.data;
							if(actives){
								actives = JSON.stringify(r.data.data)
								uni.navigateTo({
									url:'../../pageA/pages/active/trip_list?active='+ actives
								})
							uni.navigateTo({
								url:`../active/trip_list?actives=${actives}`
							})
							}
						} 
					},
						complete(res){
							if(res.data && res.data.msg){
								uni.showToast({
									icon:'none',
									title:res.data.msg
								})
							}
						},
				});
			},
			callPhoeHandle(){
				uni.makePhoneCall({
					phoneNumber:'13326221869',
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.type = e.target.value
			},
			itemClicked: function(item, path) {
				uni.navigateTo({
					url: path + '?id=' + item.id
				})
			}
		},
		onLoad() {
			var that = this;
			uni.request({
				url: `${config.baseUrl}/getnewphoto?token=` + uni.getStorageSync('token'),
				method: 'GET',
				success(r) {
					if (r.data.succ) {
						that.banners = r.data.data[0];
					}
				},
					complete(res){
						if(res.data && res.data.msg){
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					},
			});
			uni.request({
				url: `${config.baseUrl}/article/listmain?token=` + uni.getStorageSync('token'),
				method: 'GET',
				success(r) {
					if (r.data.succ) {
						that.articles = r.data.data;
					}
				},
					complete(res){
						if(res.data && res.data.msg){
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					},
			});
			uni.request({
				url: `${config.baseUrl}/news/listmain?token=` +  uni.getStorageSync('token'),
				method: 'GET',
				success(r) {
					if (r.data.succ) {
						that.news = r.data.data;
					}
				},
					complete(res){
						if(res.data && res.data.msg){
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					},
			});
		}
	}
</script>

<style>
</style>
